<nz-layout>
  <nz-content>
    <nz-spin [nzSpinning]="isSpinning" [nzTip]="'正在初始化模块信息...'">
      <!-- 实训指导 -->
      <div id="RightBtn" class="fix_right_btn" (click)="showRight()">
        <p>实验指导</p>
        <i class="anticon anticon-double-left"></i>
      </div>
      <div id="RightBox" class="fix_right_box">
        <p class="left_icon">实验指导</p>
        <div class="rb_content" [innerHTML]="guideDocument">
          <!-- <iframe style="width: 950px; height: 680px;" [src]="docUrl"></iframe> -->
        </div>
        <i class="right_icon anticon anticon-double-right" (click)="hideRight()"></i>
      </div>
      <!-- END 实训指导 -->
      <!-- 头部图片 -->
      <div>
        <img style="width: 100%;height: auto" [src]="flowRecordOutput&&flowRecordOutput.bannerImage?httpService.IP_PORT+flowRecordOutput.bannerImage:''"
          alt="">
      </div>
      <!-- 操作条 -->
      <div class="nav-bar-virtual">
        <ul>
          <li>
            <a (click)="goBack()">
              < 返回 </a> </li> <li>
                <!-- <a *ngIf="subjectId" [href]="httpService.IP_PORT+'?subjectid='+subjectId+'&typeinfo=2'" target="_blank">
                  教学指导
                </a> -->
                <a (click)="showModalForFiles()">
                  课程资料
                </a>
          </li>
        </ul>
      </div>
      <!-- 角色演练，步骤审核内容 -->
      <div style="width: 1600px;margin:auto;" *ngIf="loginType=='0'">
        <nz-collapse style="margin: 3px;">
          <!-- 角色演练表单设置 -->
          <nz-collapse-panel id="errorInfo" nzHeader="角色演练表单设置">
            <form nz-form>
              <nz-form-item>
                <nz-form-label [nzSpan]="6">审批结果</nz-form-label>
                <nz-form-control [nzSpan]="14">
                  <nz-select [(ngModel)]="selectedTypeValue" name="selectedTypeValue" nzAllowClear nzPlaceHolder="选择审批判断">
                    <nz-option nzValue="审批拒绝" nzLabel="审批拒绝"></nz-option>
                    <nz-option nzValue="审批通过" nzLabel="审批通过"></nz-option>
                  </nz-select>
                </nz-form-control>
              </nz-form-item>
              <nz-form-item>
                <nz-form-label [nzSpan]="6">审批结果</nz-form-label>
                <nz-form-control [nzSpan]="14">
                  <textarea [(ngModel)]="errorMsgInfo" name="errorMsgInfo" nz-input placeholder="错误信息提示" [nzAutosize]="{ minRows: 6, maxRows: 6 }"></textarea>
                </nz-form-control>
              </nz-form-item>
              <nz-form-item>
                <nz-form-control>
                  <button nz-button nzType="primary" (click)="updateSubjectError()">保存</button>
                </nz-form-control>
              </nz-form-item>
            </form>
          </nz-collapse-panel>
        </nz-collapse>
      </div>
      <div style="width: 1600px;margin:auto;">
        <!-- 演练完成提示 -->
        <div style="min-height: auto; margin-bottom: 10px;" class="steps-content" *ngIf="flowRecordOutput && flowRecordOutput.drillStatus && flowRecordOutput.drillStatus==2">
          <div style="margin: auto">
            <h1 style="color:red;font-size: 22px">{{flowRecordOutput.notValid?'操作错误，演练已经结束':'演练已经完成'}}</h1>
            <h2 style="color:red;font-size: 20px" *ngIf="flowRecordOutput.notValid">{{flowRecordOutput.errorMessage}}</h2>
          </div>
        </div>

        <div style="padding: 2%" *ngIf="!isSpinning && flowRecordOutput && flowRecordOutput.drillStatus && flowRecordOutput.drillStatus<=2 && currentIndex != undefined">
          <nz-steps [nzCurrent]="getCurrentIndex">
            <nz-step class="aqqq" style="cursor: pointer;" *ngFor="let item of flowRecordOutput.drillRecordFlowOutputs"
              [nzTitle]="item.flowName" [nzDescription]="'角色名称:'+item.roleName+',操作人：'+item.userName+(flowRecordOutput.currentStep == item.flowIndex && item.drillStatus!=2?'【当前操作步骤】':'')"
              (click)="goToSept(item.flowIndex)"></nz-step>
          </nz-steps>
        </div>

        <div class="steps-content" *ngIf="flowRecordOutput && flowRecordOutput.drillStatus && flowRecordOutput.drillStatus<=2 && validateForm">
          <!-- 演练记录时间线 -->
          <nz-collapse style="margin: 3px;">
            <nz-collapse-panel nzHeader="教师评分" *ngIf="flowRecordOutput && flowRecordOutput.teacherGroupScores">
              <form nz-form style="width:100%; margin:auto;">
                <nz-form-item>
                  <ng-container *ngFor="let tgroupScore of flowRecordOutput.teacherGroupScores">
                    <nz-form-control [nzSpan]="8">
                      <div style="float:right;">
                        <span style="margin-right:10px;">角色名：{{tgroupScore.roleName}}</span>
                        <span>操作人：{{tgroupScore.personName}}</span>
                      </div>
                    </nz-form-control>
                    <nz-form-control [nzSpan]="4">
                      <span *ngIf="!tgroupScore.canScore">评分：<span style="color:red;">完成所有评分</span></span>
                      <span *ngIf="tgroupScore.canScore">评分：
                        <nz-select style="width: 120px;" [(ngModel)]="tgroupScore.score" [name]="tgroupScore.studentId"
                          nzAllowClear nzPlaceHolder="选择分数">
                          <nz-option *ngFor="let p of teacherScoreArray" [nzValue]="p" [nzLabel]="p"></nz-option>
                        </nz-select>
                      </span>
                    </nz-form-control>
                  </ng-container>

                </nz-form-item>
                <nz-form-item>
                  <nz-form-control>
                    <button nz-button nzType="primary" (click)="saveTeacherScoreSet()">保存</button>
                  </nz-form-control>
                </nz-form-item>
              </form>

            </nz-collapse-panel>
            <nz-collapse-panel nzHeader="演练记录时间线">
              <nz-timeline style="text-align: left;">
                <ng-container *ngFor="let log of arLogHistory" [ngSwitch]="log.nzDot">
                  <nz-timeline-item *ngSwitchCase="'lineStart'" [nzColor]="log.nzColor" style="font-weight: bold;"
                    [nzDot]="lineStart">{{log.nzMessage}}</nz-timeline-item>
                  <nz-timeline-item *ngSwitchCase="'linePass'" [nzColor]="log.nzColor" style="color: green" [nzDot]="linePass">{{log.nzMessage}}</nz-timeline-item>
                  <nz-timeline-item *ngSwitchCase="'lineComplete'" [nzColor]="log.nzColor" style="font-weight: bold; color: green"
                    [nzDot]="lineComplete">{{log.nzMessage}}</nz-timeline-item>
                  <nz-timeline-item *ngSwitchCase="'lineReturn'" [nzColor]="log.nzColor" style="font-weight: bold; color: red"
                    [nzDot]="lineReturn">{{log.nzMessage}}</nz-timeline-item>
                </ng-container>
              </nz-timeline>
              <ng-template #lineStart>
                <i class="anticon anticon-plus-circle-o" style="font-size: 16px;"></i>
              </ng-template>
              <ng-template #linePass>
                <i class="anticon anticon-check-circle-o" style="font-size: 16px;"></i>
              </ng-template>
              <ng-template #lineComplete>
                <i class="anticon anticon-schedule" style="font-size: 16px;"></i>
              </ng-template>
              <ng-template #lineReturn>
                <i class="anticon anticon-rollback" style="font-size: 16px;"></i>
              </ng-template>
            </nz-collapse-panel>
          </nz-collapse>
          <!-- 审核内容 -->
          <nz-collapse style="margin: 3px;">
            <nz-collapse-panel *ngIf="reViewIndex>0 && currentIndex>1" nzHeader="审核内容">
              <app-drill-preview [recordId]="recordId" [reViewIndex]="reViewIndex"></app-drill-preview>
            </nz-collapse-panel>
            <!-- ##############################################操作内容############################################################ -->
            <nz-collapse-panel nzActive nzHeader="操作内容">
              <app-drill-preview *ngIf="!flowRecordOutput.canOperation && arTableFormControls.length>0" [recordId]="recordId"
                [reViewIndex]="currentIndex?currentIndex:0"></app-drill-preview>
              <form nz-form [formGroup]="validateForm" *ngIf="flowRecordOutput.canOperation ">
                <nz-spin [nzSpinning]="isPending" [nzTip]="'正在执行操作...'">
                  <!-- 表单内容 -->
                  <table style="text-align: center;align-content: center;width:1024px;margin: auto;"
                    [style.background-color]="flowRecordOutput&&flowRecordOutput.backgroundCorlor && !flowRecordOutput.backgroundImage?flowRecordOutput.backgroundCorlor:''"
                    [style.background-image]="flowRecordOutput&&flowRecordOutput.backgroundImage ?'url('+httpService.IP_PORT+flowRecordOutput.backgroundImage+')':''">
                    <tr style="display: none;">
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                    <ng-container *ngFor="let tableRow of arTableFormControls">
                      <tr style="min-height:24px; ">
                        <ng-container *ngFor="let formCol of tableRow">
                          <td *ngIf="formCol.labelRowIndex  && !formCol.imgPath" [attr.rowspan]="formCol.labelRowSpan"
                            [attr.colspan]="formCol.labelColSpan!=0?formCol.labelColSpan:8" style="text-align: center;word-break: break-all;vertical-align: middle;width: auto;"
                            [style.height]="(formCol.inputRowSpan?formCol.inputRowSpan*40:40)+'px'">
                            <!-- 标题 -->
                            <span style="color: red;" *ngIf="formCol.isRequired">*</span>{{formCol.fieldCaption}}
                          </td>
                          <td *ngIf="formCol.labelRowIndex && formCol.imgPath" [attr.rowspan]="formCol.labelRowSpan"
                            [attr.colspan]="formCol.labelColSpan!=0?formCol.labelColSpan:8" style="text-align: center;word-break: break-all;vertical-align: middle;min-height: 30px;"
                            [style.height]="(formCol.inputRowSpan?formCol.inputRowSpan*40:40)+'px'">
                            <!-- 标题是图片 -->
                            <img style="width: 100%;height: auto; max-width: 300px; max-height: 300px;" class="avatar"
                              [src]="httpService.IP_PORT+formCol.imgPath">
                          </td>
                          <td style="text-align: center;vertical-align: middle;width: auto;" *ngIf="formCol.inputRowIndex"
                            [attr.rowspan]="formCol.inputRowSpan" [attr.colspan]="formCol.inputColSpan!=0?formCol.inputColSpan:16"
                            [style.height]="(formCol.inputRowSpan?formCol.inputRowSpan*40:40)+'px'">
                            <nz-form-item>
                              <ng-container>
                                <nz-form-control nz-col nzHasFeedback [ngSwitch]="formCol.fieldType">
                                  <!-- 文本框 -->
                                  <input nz-input *ngSwitchCase="0" [formControlName]="formCol.fieldName" [id]="formCol.fieldName" />
                                  <!-- 多行文本 -->
                                  <textarea *ngSwitchCase="2" nz-input [formControlName]="formCol.fieldName" [id]="formCol.fieldName"
                                    [nzAutosize]="{ minRows: 8, maxRows: 14 }"></textarea>
                                  <!-- 多选框 -->
                                  <nz-checkbox-group *ngSwitchCase="3" [formControlName]="formCol.fieldName">
                                    <ng-container *ngFor="let option of formCol.fieldData">
                                      <label nz-checkbox [nzValue]="option.dValue">
                                        <span>{{option.caption}}</span>
                                      </label>
                                    </ng-container>
                                  </nz-checkbox-group>
                                  <!-- radio -->
                                  <nz-radio-group *ngSwitchCase="4" [formControlName]="formCol.fieldName">
                                    <ng-container *ngFor="let option of formCol.fieldData">
                                      <label nz-radio [nzValue]="option.dValue">
                                        <span>{{option.caption}}</span>
                                      </label>
                                    </ng-container>
                                  </nz-radio-group>
                                  <!-- select 加载全部 -->
                                  <ng-container *ngSwitchCase="5">
                                    <nz-select *ngIf="formCol.loadRemoteDataType==0" [nzPlaceHolder]="'请选择'+ formCol.fieldCaption"
                                      [formControlName]="formCol.fieldName" nzAllowClear>
                                      <nz-option *ngFor="let option of formCol.fieldData" [nzLabel]="option.caption"
                                        [nzValue]="option.dValue">
                                      </nz-option>
                                    </nz-select>
                                    <nz-select *ngIf="formCol.loadRemoteDataType==1" nzAllowClear [nzPlaceHolder]="'根据填入内容搜索'"
                                      [formControlName]="formCol.fieldName" (nzSearchChange)="searchChange($event,1,formCol.fieldName)"
                                      [nzNotFoundContent]="'无法找到'" nzShowSearch>
                                      <nz-option *ngFor="let option of formCol.fieldData" [nzLabel]="option.caption"
                                        [nzValue]="option.dValue">
                                      </nz-option>
                                    </nz-select>
                                  </ng-container>
                                  <!-- 头像 -->
                                  <span>
                                    <nz-upload *ngSwitchCase="10" class="avatar-uploader" [nzName]="formCol.fieldName"
                                      [nzShowUploadList]="false" [nzBeforeUpload]="beforeImgUpload" [nzCustomRequest]="bindingForm">
                                      <i *ngIf="!focusEntity[formCol.fieldName]" class="anticon anticon-plus avatar-uploader-trigger"></i>
                                      <div *ngIf="!focusEntity[formCol.fieldName]" class="ant-upload-text">{{formCol.fieldCaption}}</div>
                                      <img style="width: 100%;height: auto; max-width: 300px; max-height: 300px;" *ngIf="focusEntity[formCol.fieldName]"
                                        class="avatar" [src]="(isHaveImage(formCol.fieldName)?httpService.IP_PORT:'')+focusEntity[formCol.fieldName]">
                                    </nz-upload>
                                  </span>
                                  <!-- 文件上传 -->
                                  <nz-upload *ngSwitchCase="11" [(nzFileList)]="fileList[formCol.fieldName]" [nzName]="formCol.fieldName"
                                    [nzBeforeUpload]="beforeUpload" [nzCustomRequest]="bindingFormFile" (nzChange)="handleChange($event,formCol.fieldName)"
                                    [nzLimit]="1">
                                    <button nz-button>
                                      <i class="anticon anticon-upload"></i>
                                      <span>选择文件</span>
                                    </button>
                                  </nz-upload>
                                  <!-- 数字 -->
                                  <nz-input-number *ngSwitchCase="6" [nzStep]="1" [formControlName]="formCol.fieldName"></nz-input-number>
                                  <!-- toggle -->
                                  <nz-switch *ngSwitchCase="7" nzCheckedChildren="是" nzUnCheckedChildren="否"
                                    [formControlName]="formCol.fieldName">
                                  </nz-switch>
                                  <!-- Datetime -->
                                  <nz-date-picker *ngSwitchCase="8" [formControlName]="formCol.fieldName"></nz-date-picker>
                                  <!-- 验证内容 -->
                                  <nz-form-explain style="color: red;" *ngIf="validateForm.controls[formCol.fieldName].dirty&&validateForm.controls[formCol.fieldName].errors">
                                    <ng-container *ngIf="validateForm.controls[formCol.fieldName].hasError('required')">
                                      {{formCol.fieldCaption}}为必填项.
                                    </ng-container>
                                    <ng-container *ngIf="validateForm.controls[formCol.fieldName].hasError('maxlength')">
                                      {{formCol.fieldCaption}}的最大长度{{formCol.maxLength}}.
                                    </ng-container>
                                    <ng-container *ngIf="validateForm.controls[formCol.fieldName].hasError('minlength')">
                                      {{formCol.fieldCaption}}的最小长度{{formCol.minLength}}.
                                    </ng-container>
                                    <ng-container *ngIf="validateForm.controls[formCol.fieldName].hasError(formCol.fieldName)">
                                      内容已经存在.
                                    </ng-container>
                                  </nz-form-explain>
                                </nz-form-control>
                              </ng-container>
                            </nz-form-item>
                          </td>
                        </ng-container>
                      </tr>
                    </ng-container>
                  </table>
                  <!-- 操作内容 -->
                  <table style="text-align: center;align-content: center;width:1024px;margin: auto;border: none;">
                    <tr style="border: none;">
                      <td colspan="24" style="border: none;">
                        <ng-container *ngIf=" flowRecordOutput.currentHandleType==0">
                          <nz-form-item nz-row>
                            <nz-form-control nz-col>
                              <button nz-button [disabled]="!flowRecordOutput.canOperation" class="login-form-button"
                                [nzType]="'primary'" (click)="addEntity(6)">提交</button>
                            </nz-form-control>
                          </nz-form-item>
                        </ng-container>
                        <ng-container *ngIf="flowRecordOutput.currentHandleType==1">
                          <nz-form-item nz-row>
                            <nz-form-control nz-col>
                              <button nz-button [disabled]="!flowRecordOutput.canOperation" class="login-form-button"
                                [nzType]="'default'" (click)="addEntity(0)">审批通过</button>
                              <button nz-button [disabled]="!flowRecordOutput.canOperation" class="login-form-button"
                                [nzType]="'default'" (click)="addEntity(1)">审批退回</button>
                            </nz-form-control>
                          </nz-form-item>
                        </ng-container>
                        <ng-container *ngIf="flowRecordOutput.currentHandleType==2">
                          <nz-form-item nz-row>
                            <nz-form-control nz-col>
                              <button nz-button [disabled]="!flowRecordOutput.canOperation" class="login-form-button"
                                [nzType]="'default'" (click)="addEntity(5)">完成</button>
                            </nz-form-control>
                          </nz-form-item>
                        </ng-container>
                      </td>
                    </tr>
                  </table>
                </nz-spin>
              </form>
            </nz-collapse-panel>

          </nz-collapse>
        </div>
      </div>
      <div style="margin-top: 300px;"></div>
      <!-- 底部图片 -->
      <div>
        <img style="width: 100%;height: auto" [src]="flowRecordOutput&&flowRecordOutput.bottomImage?httpService.IP_PORT+flowRecordOutput.bottomImage:''"
          alt="">
      </div>
    </nz-spin>
  </nz-content>
</nz-layout>
